<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>荒料排行</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        .empty{ text-align: center; padding: 120px 0; }
        .lunbo img{
          width: 100%;
          height: 200px;
        }
        .rmhl-text{
          height: 48px;
           display: flex;
           align-items: center;
           border-bottom: 1px solid #999;
        }
        .hot-img-blo{
          margin: 0 10px;
        }
        .hot-img-blo img{
          width: 20px;
          height: 20px;
        }

        .sort-title{
          display:flex;
          justify-content:space-between;
          padding:10px 6%;
          background-color:#f5f5f5;
        }
        .sort-title > div{
            width: 22%;
            text-align: center;
        }

        .sort-list-blo{
          margin:0 15px;
        }
        .sort-list-block{
          border-bottom:1px dashed #999;
          display:flex;
          align-items:center;
          justify-content:space-between;
          height:35px;
          margin:0 8px;
         }
         .sort-list-block > div{
           width: 22%;
           text-align: center;
         }
    </style>
</head>
<body>
    <div class="wrap">
      <div class="lunbo">
        <img src="../image/banner1.png" alt="">
      </div>
      <div class="rmhl-text">
        <div class="hot-img-blo">
        <img src="../image/red.png" alt="">
        </div>
        <div>热门荒料交易排行榜</div>
      </div>
      <div class="sort-blo">
        <div class="sort-title">
          <div class="sort-title-list">排名</div>
          <div class="sort-title-list">石种</div>
          <div class="sort-title-list">体积</div>
        </div>
        <div class="sort-list-blo">
          <!-- <div class="sort-list-block">
            <div class="sort-list">排名</div>
            <div class="sort-list">石种</div>
            <div class="sort-list">体积</div>
          </div> -->
        </div>
      </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

apiready = function(){
     var page = 1;
     api.ajax({
         url: 'https://appmarket.stoneonline.com/slsw/mtloutrank.do',
         method: 'post',
         data: {
           values: {
             weChatKey: '9237B361957490BA9644A710A5E3DD84',
             Data: {is_refresh:'true',page_num:'1',item_num:20,wltype:'huangliao',erpId:'1'},
           }
         }
     },function(ret, err) {
         if (ret) {
             if(ret.Result){
                 var data = ret.Data;
                 var listHtml = '';
                 for(var i = 0; i < data.length; i++){
                      listHtml += '          <div class="sort-list-block">'+
                                '  <div class="sort-list">'+ (i+1) +'</div>'+
                                ' <div class="sort-list">'+ data[i].mtlName +'</div>'+
                                ' <div class="sort-list">'+ (data[i].VAQty + 'm²') +'</div>'+
                                ' </div>'
                  }
                   $('.sort-list-blo').empty().append(listHtml);
             }
         } else {
             api.alert({ msg: JSON.stringify(err) });
         }
     });

     // $api.byId('sys-info').innerHTML = str;

 };
</script>
</html>
